<template>
  <view class="goods-detail">
    <u-swiper
      :list="goodsDetal.pics"
      name="pics_big"
      height="497"
      img-mode="aspectFix"
      bg-color="#fff"
      @click="clickPreviewImage"
    ></u-swiper>
    <view class="goods-detail-item">
      <view class="goods-detail-price">￥{{ goodsDetal.goods_price }}</view>
      <view class="goods-detail-name u-line-2">{{
        goodsDetal.goods_name
      }}</view>
    </view>
    <u-line color="#ccc"></u-line>
    <view class="detail-title">
      <view class="u-text-center u-p-20">图文详情</view>
      <!-- 富文本 -->
      <view class="u-content">
        <u-parse :html="goodsDetal.goods_introduce"></u-parse>
      </view>
    </view>
    <!-- 底部功能 -->
    <view class="navigation">
      <view class="left">
        <view class="item">
          <u-icon
            name="server-fill"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">客服</view>
        </view>

        <navigator url="/pages/cart/cart" open-type="switchTab">
          <view class="item car">
            <!-- count显示当前购物车共有多少东西 -->
            <u-badge
              class="car-num"
              :count="count"
              type="error"
              :offset="[-3, -6]"
            ></u-badge>
            <u-icon
              name="shopping-cart"
              :size="40"
              :color="$u.color['contentColor']"
            ></u-icon>
            <view class="text u-line-1">购物车</view>
          </view>
        </navigator>
      </view>
      <view class="right">
        <view class="cart btn u-line-1" @click="cartAdd">加入购物车</view>
        <view class="buy btn u-line-1">立即购买</view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      goodsDetal: null,
      //   content: "",
    };
  },
  onLoad({ goods_id }) {
    goods_id = goods_id || 47869;
    this.getGoodsDetail(goods_id);
  },
  computed: {
    ...mapState({
      count: (state) =>
        state.cart.cartList.reduce((count, item) => {
          count += item.nums;
          return count;
        }, 0),
    }),
  },
  methods: {
    ...mapMutations(["cart/cartAdd"]),
    cartAdd() {
      // console.log(this["cartAdd/cart"]);
      this["cart/cartAdd"]({ value: this.goodsDetal });
    },
    clickPreviewImage(index) {
      const urls = this.goodsDetal.pics.map((item) => item.pics_big);
      const current = urls[index];
      wx.previewImage({ urls, current });
    },
    async getGoodsDetail(goods_id) {
      this.goodsDetal = await this.$u.get("/goods/detail", { goods_id });
    },
  },
};
</script>

<style lang="scss">
.goods-detail {
  margin-bottom: 110rpx;
  // background-color: #ccc;
  .goods-detail-item {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 200rpx;
    padding: 0 34rpx;
    .goods-detail-price {
      color: $themeColor;
      font-weight: 700;
    }
    .goods-detail-name {
      line-height: 50rpx;
    }
  }
  //底部模块样式
  .navigation {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-around;
    width: 750rpx;
    // margin-top: 100rpx;
    border: solid 2rpx #ccc;
    background-color: #ffffff;
    padding: 16rpx 0;
    .left {
      display: flex;
      font-size: 20rpx;
      .item {
        margin: 0 30rpx;
        &.car {
          text-align: center;
          position: relative;
          .car-num {
            position: absolute;
            top: -10rpx;
            right: -10rpx;
          }
        }
      }
    }
    .right {
      display: flex;
      font-size: 28rpx;
      align-items: center;
      .btn {
        line-height: 66rpx;
        padding: 0 30rpx;
        border-radius: 36rpx;
        color: #ffffff;
      }
      .cart {
        background-color: #ed3f14;
        margin-right: 30rpx;
      }
      .buy {
        background-color: #ff7900;
      }
    }
  }
}
</style>